<template>
	<view class="pageBg">
		<Skeleton v-if="skeletonLoading" type="jobfair"></Skeleton>
		<Head title="我的参会" type="detail" :isBack="false"></Head>
		<view class="list">
			<view class="item" v-for="(item,index) in list" @click="handleJump(item)">
				<view class="title"> 
					<text class="state color2" v-if="item.audit == 0">审核中</text>
					<text class="state color1" v-if="item.audit == 1">已预定</text>
					<text class="state color3" v-if="item.audit == 2">未通过</text>
					<text class="text substring">{{item.title}}</text>
				</view>
				<view class="time">
					举办时间：<text>{{item.starttime | timeFilter}}</text>&nbsp;&nbsp;至&nbsp;&nbsp;<text>{{item.endtime | timeFilter}}</text>
				</view> 
				<!-- <view class="cause">
					原因：<text>这是一条审核不通过的原因</text>
				</view> -->  
				<view class="census u-border-top">
					<view class="censusItem substring">参会企业：{{item.total_company}}</view>
					<view class="censusItem substring">参会个人：{{item.total_personal}}</view>
					<view class="censusItem substring">浏览次数：{{item.click}}</view>
				</view>
			</view>
			<u-loadmore v-if="list.length >= params.pagesize"  class="u-loadmore" :status="finished_status"></u-loadmore>
			<Empty v-if="list.length<=0"></Empty>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		data() {
			return {
				skeletonLoading:true,
				params: {
					page: 1,
					pagesize: 7
				},
				list:[],
				finished_status: 'loadmore',
				show_empty:false,
				total_page:0
			};
		},
		filters: {
		    timeFilter (timestamp) {
		      return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
		    }
		},
		onReachBottom(){
			this.finished_status = 'loading';
			if(this.total_page > this.params.page){
				this.params.page++
				this.getJobfairolList(false)
			}else{
				this.finished_status = 'nomore'
			}
		},  
		mounted() {
			this.getJobfairolList(true)
		},
		methods: {
			handleJump(item){
				uni.navigateTo({
					url:'/jobfairs/JobfairolShow?id='+item.id
				})
			},
			getJobfairolList(init) {
				http.get(api.jobfairol_reserve_list, this.params).then(res => {
					this.total_page = res.data.data.total_page
					if (init === true) {
						this.list = [...res.data.data.items]
					} else {
						this.list = this.list.concat(res.data.data.items)
					}
					this.skeletonLoading = false
					this.finished_status = 'loading';
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 26rpx 30rpx 0;

		.item {
			background: #FFFFFF;
			border-radius: 14rpx;
			margin-bottom: 18rpx;
			padding: 28rpx 0 0;

			.title {
				font-size: 0;
				padding: 0 26rpx;

				.state {
					padding: 4rpx 10rpx;
					border-radius: 4rpx;
					margin-right: 16rpx;
					font-size: 22rpx;
					vertical-align: middle;

					&.color1 {
						color: #1360FF;
						background: #F4F8FF;
						border: 1rpx solid #266DFF;
					}

					&.color2 {
						color: #FC6502;
						background: #FFFAF6;
						border: 1rpx solid #FC6502;
					}
					
					&.color3 {
						color: #A2A2A2;
						background: #F8F8F8;
						border: 1rpx solid #A2A2A2;
					}
				}

				.text {
					color: #2A2A2A;
					font-size: 32rpx;
					display: inline-block;
					max-width: 500rpx;
					vertical-align: middle;
					line-height: 47rpx;
					font-weight: 500;
				}
			}

			.time,
			.cause {
				padding: 6rpx 26rpx;
				color: #989898;
				font-size: 28rpx;

				text {
					color: #595959;
				}
			}

			.time {
				padding-top: 18rpx;
				padding-bottom: 24rpx;
			}

			.cause {
				padding-bottom: 30rpx;
			}

			.census {
				display: flex;
				padding: 24rpx 26rpx;
				&::after{
					border-color: #F2F2F2;
				}
				.censusItem {
					color: #2A2A2A;
					font-size: 26rpx;
					position: relative;
					max-width: 214rpx;
					&+.censusItem::before {
						content: '，';
						// margin: 0 6rpx;
					}
					
				}
			}
		}
	}
</style>
